<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <!-- <crudOperation :permission="permission" /> -->
      <div style="display: flex;align-items: start;margin: 0 0 20px 0;gap: 10px;">
        <el-radio-group v-model="selected">
          <el-radio-button label="按料号设置" value="PRODUCTNO" />
          <el-radio-button label="按客户设置" value="RECEIVER" />
          <el-radio-button label="按类型设置" value="CATEGORY" />
        </el-radio-group>
        <div style="display: flex;gap: 5px;">
          <!-- <el-button type="warning" size="mini" icon="el-icon-refresh-right" class="filter-item" @click="reset">重置</el-button> -->
          <el-button
            type="primary"
            size="mini"
            class="filter-item"
            icon="el-icon-download"
            plain
            :loading="btn.download"
            @click="downloadExcel"
          >下载数据</el-button>
        </div>
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="loading" :data="list" size="small" style="width: 100%;">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="ruleType" label="规则类型" />
        <el-table-column v-if="selected === '按料号设置'" prop="productNo" label="料号" />
        <el-table-column prop="receiverName" label="客户" />
        <el-table-column prop="partnerProductNo" label="客户物料编码" />
        <el-table-column v-if="selected !== '按客户设置'" prop="category" label="物料类型" />
        <el-table-column v-if="selected === '按料号设置'" prop="productDescription" label="物料描述" />
        <el-table-column prop="maxLimit" label="上限" />
        <el-table-column prop="minLimit" label="下限" />
        <el-table-column prop="Qty" label="库存数量" />
        <el-table-column prop="lowerLimit" label="下限比例" />
        <el-table-column prop="upperLimit" label="上限比例" />
        <el-table-column prop="status" label="灯号">
          <template slot-scope="scope">
            {{ dict.label.light_color[scope.row.status] }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="handler(scope.row)">暂定按钮</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页组件-->
      <el-pagination
        :page-size.sync="query.size"
        :total="total"
        :current-page.sync="query.current"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChangeHandler($event)"
        @current-change="pageChangeHandler"
      />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getListAPI, downLoadFileAPI } from '@/api/work/waterLevel'
export default {
  name: 'WaterLevel',
  dicts: ['storage_status', 'light_color'],
  data() {
    return {
      selected: '按料号设置',
      uploadUrl: process.env.VUE_APP_BASE_API + 'api/materialMaintenance/importExcel' + `/ruleType=${this.selectedValue}`,
      headers: {
        'Authorization': getToken(),
        'Content-Type': 'multipart/form-data'
      },
      fileName: '',
      list: [],
      loading: false,
      query: {
        ruleType: 'PRODUCTNO',
        current: 1,
        size: 10
      },
      total: 0,
      btn: {
        download: false
      }
    }
  },
  computed: {
    selectedValue() {
      switch (this.selected) {
        case '按客户设置':
          return 'RECEIVER'
        case '按类型设置':
          return 'CATEGORY'
        case '按料号设置':
          return 'PRODUCTNO'
        default:
          return ''
      }
    }
  },
  watch: {
    selectedValue(newVal, oldVal) {
      if (newVal === 'RECEIVER') {
        this.query.ruleType = 'RECEIVER'
        this.toQuery()
      } else if (newVal === 'CATEGORY') {
        this.query.ruleType = 'CATEGORY'
        this.toQuery()
      } else if (newVal === 'PRODUCTNO') {
        this.query.ruleType = 'PRODUCTNO'
        this.toQuery()
      }
    }
  },
  created() {
    this.toQuery()
  },
  mounted() {
    this.toQuery()
  },
  methods: {
    toQuery() {
      this.query.current = 1
      this.getList()
    },
    reset() {
      this.query = {
        current: 1,
        size: 10
      }
      this.selected = '按客户设置'
      this.toQuery()
    },
    async getList() {
      this.loading = true
      const res = await getListAPI({
        ...this.query,
        ruleType: this.selectedValue
      })
      if (res.result === 'OK') {
        this.loading = false
        this.total = res.data.totalElements
        this.list = res.data.content
      } else {
        this.loading = false
        this.total = 0
        this.list = []
        this.$message.warning(res.data)
      }
    },
    async downloadExcel() {
      try {
        this.btn.download = true
        const res = await downLoadFileAPI(this.selectedValue)
        if (res && res instanceof Blob) {
          this.downloadFile(res)
        } else {
          this.$message.warning('文件下载失败，返回数据不是有效的文件内容')
        }
      } finally {
        this.btn.download = false
      }
      // console.log(res)
      // if (res && res instanceof Blob) {
      //   this.downloadFile(res)
      // } else {
      //   this.$message.warning('文件下载失败，返回数据不是有效的文件内容')
      // }
    },
    handler(row) {
      console.log(row)
    },
    // 分页相关
    sizeChangeHandler(e) {
      this.query.size = e
      this.query.current = 1
      this.getList()
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.query.current = e
      this.getList()
    },
    downloadFile(obj) {
      const url = window.URL.createObjectURL(new Blob([obj]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      if (this.selected === '按客户设置') {
        this.fileName = `客户数据表_${new Date().getTime()}.xlsx`
      } else if (this.selected === '按类型设置') {
        this.fileName = `类型数据表_${new Date().getTime()}.xlsx`
      } else if (this.selected === '按料号设置') {
        this.fileName = `料号数据表_${new Date().getTime()}.xlsx`
      }
      link.setAttribute('download', this.fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>

<style scoped>

</style>
